<template>
	<div>
		<!-- 表单组件 -->
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="待办" name="todos">
				<el-table ref="multipleTable" :data="todoDataList" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column prop="processName" label="流程名" align="center">
					</el-table-column>
					<el-table-column prop="taskName" label="任务名" width="400px" align="center">
					</el-table-column>
					<el-table-column prop="taskBegin" label="产生时间" align="center">
					</el-table-column>
					<el-table-column prop="claimTime" label="签收时间" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button size="mini" @click="showOrder(scope.$index,scope.row)">查看申请单</el-button>
							<el-button size="mini" @click="handleClaim(scope.$index,scope.row)"
								v-show="scope.row.claimTime==null">签收</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="handleAudit(scope.$index,scope.row)" v-show="scope.row.claimTime!=null">审核
							</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="auditTrail(scope.$index, scope.row)">跟踪
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="已办" name="dos">
				<el-table ref="multipleTable" :data="dosDataList" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column prop="processName" label="流程名" align="center">
					</el-table-column>
					<el-table-column prop="taskName" label="任务名" width="400px" align="center">
					</el-table-column>
					<el-table-column prop="taskBegin" label="产生时间" align="center">
					</el-table-column>
					<el-table-column prop="claimTime" label="签收时间" align="center">
					</el-table-column>
					<el-table-column label="操作" align="center" show-overflow-tooltip width="240px">
						<template slot-scope="scope">
							<el-button size="mini" @click="showOrder(scope.$index,scope.row)">查看申请单</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="auditTrail(scope.$index, scope.row)">跟踪
							</el-button>
						</template>
					</el-table-column>
				</el-table>

			</el-tab-pane>
		</el-tabs>
		<!-- 分页组件 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryParams.pageNum" :page-sizes="[3, 5, 8, 10]" :page-size="queryParams.pageSize"
			layout="->,total, sizes, prev, pager, next, jumper" :total="queryParams.total">
		</el-pagination>

		<el-dialog title="价格调整申请单" :visible.sync="pricechangeVisible" width="40%">
			<el-form :model="addPriceForm" size="small" hide-required-asterisk ref="addPriceForm" label-width="70px">
				<el-form-item label="商品编码" label-width="160px">
					<el-input disabled v-model="addPriceForm.goods.gcode" size="mini" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="商品名称" label-width="160px">
					<el-input disabled v-model="addPriceForm.goods.gname" size="mini" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="商品库存" label-width="160px">
					<el-input disabled v-model="addPriceForm.goods.stock" size="mini" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="商品原始价格" label-width="160px">
					市场价：<el-input disabled v-model="addPriceForm.goods.marketPrice" size="mini" style="width:150px">
					</el-input>
					商城价：<el-input disabled v-model="addPriceForm.goods.shopPrice" size="mini" style="width:150px" >
					</el-input>
				</el-form-item>
				<el-form-item label="商品调价幅度" label-width="160px">
					<div>
						<el-radio-group v-model="addPriceForm.adjustWay" disabled>
							<el-radio label="绝对值" value="绝对值"></el-radio>
							<el-radio label="百分比" value="百分比"></el-radio>
							<el-input v-show="inputAddshow" v-model="addPriceForm.percent"
								style="width: 50px;">
							</el-input>
						</el-radio-group>
					</div>
					<div>
						新市场价：<el-input v-model="addPriceForm.adjustMarketPrice" size="mini" style="width:150px"
							:disabled="inputAddshow" disabled>
						</el-input>
						新商城价：<el-input v-model="addPriceForm.adjustShoppingPrice" size="mini" style="width:150px"
							:disabled="inputAddshow" disabled>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="希望价格生效时间" label-width="160px">
					<el-date-picker v-model="addPriceForm.beginTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" size="mini" style="width: 300px;" disabled>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="希望价格失效时间" label-width="160px">
					<el-date-picker v-model="addPriceForm.endTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" size="mini" style="width: 300px;" disabled>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="活动情况或原因" label-width="160px">
					<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 10}" placeholder="请输入活动情况或原因说明"
						v-model="addPriceForm.reason" size="mini" style="width: 300px;" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="备注" label-width="160px">
					<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 10}" placeholder="请输入备注信息"
						v-model="addPriceForm.remark" size="mini" style="width: 300px;" disabled>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pricechangeVisible = false">取 消</el-button>
			</span>
		</el-dialog>

		<!-- 审核参数配置对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="审核意见">
					<el-input v-model="form.approveContent" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" @click="doApprove('未通过')">不通过</el-button>
				<el-button type="primary" @click="doApprove('已通过')">通过</el-button>
				<el-button @click="open=false">取 消</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="审核记录" :visible.sync="processTaskVisble" width="70%">
			<el-table ref="processTaskTableData" :data="processTaskTableData" tooltip-effect="dark">
				<el-table-column prop="taskName" label="任务名"  align="center"></el-table-column>
				<el-table-column prop="taskUser" label="审批人员" align="center"></el-table-column>
				<el-table-column prop="taskBegin" label="产生时间"  align="center"></el-table-column>
				<el-table-column prop="claimTime" label="签收时间"  align="center"></el-table-column>
				<el-table-column prop="taskEnd" label="审核时间"  align="center"></el-table-column>
				<el-table-column prop="approveResult" label="结果" align="center"></el-table-column>
				<el-table-column prop="approveContent" label="意见" align="center"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pricechangeVisible: false,
				inputAddshow:false,
				addPriceForm: {
					id: null,
					goods: {
						id: '',
						gname: '',
						gcode: '',
						marketPrice: 0.0,
						shopPrice: 0.0,
						stock: 0
					},
					adjustWay: '绝对值',
					percent: 0,
					adjustMarketPrice: 0.0,
					adjustShoppingPrice: 0.0,
					processStatus: '草稿',
					beginTime: '',
					endTime: '',
					reason: '',
					remark: '',
					goodsId: '',
					applyUser: ''
				},
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				users: [],
				productReturnState: [],
				showSearch: true,
				colorTypes: [],
				activeName: 'todos',
				todoDataList: [],
				dosDataList: [],
				open: false,
				form: {
					id: null,
					taskName: '',
					processName: '',
					applyId: '',
					taskUser: '',
					taskBegin: '',
					taskEnd: '',
					approveResult: '',
					approveContent: '',
				},
				title: "审核",
				processTaskVisble:false,
				processTaskTableData:[],
			};
		},
		methods: {
			// 审核跟踪
			auditTrail(index, row) {
				axios.get('/prices/audit/'+row.applyId).then(resp=>{
					this.processTaskVisble=true;
					this.processTaskTableData=resp.data;
				})
			},
			showOrder(i, row) {
				axios.get('/prices/' + row.applyId).then(resp => {
					this.pricechangeVisible = true;
					this.addPriceForm = resp.data;
				});
			},
			//通过
			doApprove(r) {
				this.open = false;
				this.form.approveResult = r;
				axios.post('/prices/doapprove', this.form).then(resp => {
					if (resp.code == 20000) {
						this.suc("审批成功！");
						this.list();
					} else {
						this.error("审批失败");
					}
				})
			},
			//代办和已办
			handleClick(tab, event) {
				let i = tab.index;
				if (i == 0) {
					this.activeName = "todos";
				} else if (i == 1) {
					this.activeName = "dos";
				}
				this.list();
			},
			list() {
				if (this.activeName == "todos") {
					this.todoTasks();
				} else if (this.activeName == 'dos') {
					this.getHistorys();
				}
			},
			//页码改变
			handleCurrentChange(val) {
				this.queryParams.pageNum = val;
			},
			//每页数量改变
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
			},
			//审核
			handleAudit(idx, row) {
				this.form = JSON.parse(JSON.stringify(row));
				this.vi = true;
			},
			handleClaim(idx, row) {
				axios.get('/prices/claim/' + row.applyId).then(resp => {
					if (resp.code == 20000) {
						this.suc("签收成功");
						this.list();
					}
				})
			},
			//s设置表头行的样式
			tableHeaderColor({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return 'background-color:#dcdcdc;color:#6b6b6b;font-wight:100;font-size:15px;text-align:center'
			},
			todoTasks(params) {
				axios.get("/prices/todos").then(resp => {
					this.todoDataList = resp.list;
					this.queryParams.pageNum = resp.pageNum;
					this.queryParams.pageSize = resp.pageSize;
					this.queryParams.total = resp.total;
				})
			},
			getHistorys(params) {
				axios.get("/prices/dos").then(resp => {
					this.dosDataList = resp.list;
					this.queryParams.pageNum = resp.pageNum;
					this.queryParams.pageSize = resp.pageSize;
					this.queryParams.total = resp.total;
				})
			}
		},
		created() {

		},
		mounted() {
			this.todoTasks();
		}
	};
</script>

<style>
</style>
